<template>
  <el-card >
    <div class="item f-row ai-c p-1">
      <div class="star">*</div>
      <div class="title">处方名称</div>
      <el-input v-model="name" placeholder="请输入处方名称"></el-input>
      <div class="btn-deep">调用处方</div>
    </div>
    <div class="item f-row p-1">
      <div class="star">*</div>
      <div class="title">编辑处方</div>
      <WEditor :defaultText="defaultText" :richText.sync="expertAdvice" />
    </div>
    <div class="item f-row pl-1 mb-2">
      <div class="title"></div>
      <!-- <div class="title">上传文件</div>
      <input type="file" /> -->
      <el-upload
        class="upload-demo"
        :action="action"
        :before-upload="beforeAvatarUpload"
        multiple
        :limit="10"
        :file-list="fileList"
      >
        <div class="f-row ai-c">
          <div class="btn-deep mr-1">上传文件</div>

          <div style="font-size: 0.875rem">
            处方 病例 支持上传JPG/JPEG/PNG/DOC/DOCX/XLS/XLSX格式文件，不能超过5M
          </div>
        </div>
      </el-upload>
    </div>
    <div class="f-row ac-i btn">
      <div class="btn-light" @click="$router.go(-1)">返回</div>
      <div class="btn-deep" @click="save">保存</div>
    </div>
  </el-card>
</template>
<script>
import {
  add_prescription,
  prescription_detail,
  upfiles,
  detail_prescription,
} from "@/request/api";
import WEditor from "@/components/WEditor/WEditor.vue";
export default {
  components: {
    WEditor,
  },
  data() {
    return {
      id: null,
      fileList: [],
      action: "",
      //处方名称
      name: "",
      // 默认值
      defaultText: "",
      // 富文本更新的值
      expertAdvice: "",
    };
  },
  created() {
    if (this.$route.params) {
      let params = this.$route.params;
      this.name = params.name;
      this.$nextTick(() => {
        this.defaultText = params.expertAdvice;
      });
      this.id = params.id;
      this.getListName();
    }
  },
  methods: {
    //获取文件名
    getListName() {
      detail_prescription(this.id).then((res) => {
        if (res.code == 200) {
          this.fileList = res.result.map((i) => {
            return {
              name: i.fileName,
              url: i.url,
            };
          });
        } else {
          this.$message.error("获取文件名错误！");
        }
      });
    },
    beforeAvatarUpload(file) {
      if (file.type == "video/mp4") {
        this.$message.error("不能上传视频哦!");
      } else {
        const isLt2M = file.size / 1024 / 1024 < 5;
        if (!isLt2M) {
          this.$message.error("上传的文件不能超过 5MB!");
          return;
        }
        upfiles(file).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "上传成功！",
              type: "success",
            });
            this.fileList.push({
              name: file.name,
              url: res.result,
            });
          } else {
            this.$message.error("上传失败");
          }
        });
      }
    },
    save() {
      if (!this.name || !this.expertAdvice) {
        this.$message.error("请填写处方名称或者处方内容！");
        return;
      }
      let expertPrescription = {
        id: this.id,
        expertAdvice: this.expertAdvice,
        name: this.name,
        file: this.fileList.map((i) => i.url).toString(),
      };
      add_prescription({
        ...expertPrescription,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "保存成功！",
            type: "success",
          });
        } else {
          this.$message.error("保存失败，请重试！");
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.btn {
  padding-left: 6.25rem;
  margin-top: 1.875rem;
}
.el-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.el-input {
  width: 61.0625rem;
  margin: 0 0.375rem 0 0;
}
.item {
  color: #333333;
  font-size: 0.875rem;
  position: relative;
}
.star {
  position: absolute;
  left: 0;
  top: --0.3125rem;
  color: var(--darkColor);
}
.title {
  margin-right: 0.375rem;
  font-size: 0.875rem;
  color: #333333;
  width: 7rem;
}
</style>